﻿<template>
	<div class="customer-container">
		<el-dialog v-model="isShowDialog" :width="800" draggable="" :close-on-click-modal="false">
			<template #header>
				<div style="color: #fff">
					<span>{{ props.title }}</span>
				</div>
			</template>

			<el-form :model="ruleForm" ref="ruleFormRef" label-width="auto">
				<el-row :gutter="35">
					<el-form-item v-show="false">
						<el-input v-model="ruleForm.id" />
					</el-form-item>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="客户名称">{{ ruleForm.cusName }}</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="数量">{{ ruleForm.quantity }}</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="类型">
							<div v-if="ruleForm.type == 1">审计</div>
							<div v-else-if="ruleForm.type == 2">评估</div>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="点数" >
							{{ ruleForm.money }}
						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="资产额" prop="propertyMoney">
							{{ ruleForm.propertyMoney }}
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否出报告" prop="isReport">
								<div v-if="ruleForm.isReport"> 已出报告</div>
								<div v-else="">未出报告</div>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="报告日期" prop="reportTime">
							{{ ruleForm.reportTime }}
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否收款" prop="isCollected">
							<div v-if="ruleForm.isCollected"> 已收款</div>
							<div v-else="">未收款</div>
						</el-form-item>
						</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="收款日期" prop="collectedTime">
							{{ ruleForm.collectedTime }}
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="渠道对接" prop="sourceChanne">
							<div>
								{{ state.sourceChanneList.find(item => item.id === ruleForm.sourceChanne)?.name || '未知渠道' }}
							</div>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="渠道名称" prop="sourceChanneName">
							{{ ruleForm.sourceChanneName }}
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="备注" prop="remark">
							{{ ruleForm.remark }}
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="凭证备注" prop="remark">
							{{ ruleForm.voucherRemark }}
						</el-form-item>
					</el-col>
				</el-row>

			</el-form>

			<el-image-viewer v-if="state.showViewer" :url-list="state.previewList" :hideOnClickModal="true" @close="state.showViewer = false"></el-image-viewer>

		</el-dialog>  
	</div>
</template>
<style lang="scss" scoped>
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}
</style>
<script lang="ts" setup>
	import { ref,onMounted ,reactive} from "vue";
	import { detailCustomer } from "/@/api/main/customer";
	import { getListCustomerChannel } from '/@/api/main/customerChannel';

	interface Channel {
		id: number;
		name: string;
	}
	const state = reactive({
		showViewer: false,
		previewList: [] as string[],
		sourceChanneList: [] as Channel[]
	});

	const openFilePreviewDialog = async (row: any) => {
		state.previewList =[row.voucherImg];
		state.showViewer = true;
	};
	
	//父级传递来的参数
	var props = defineProps({
		title: {
		type: String,
		default: "",
	},
	});
	//父级传递来的函数，用于回调
	const emit = defineEmits(["reloadTable"]);
	const ruleFormRef = ref();
	const isShowDialog = ref(false);
	const ruleForm = ref<any>({});
	

	// 页面加载时
	onMounted(async () => {
		var resChannel = await getListCustomerChannel();
		state.sourceChanneList = resChannel.data.result ?? [];
	});

	// 打开弹窗
	const openDialog = async (row: any) => {
		// 改用detail获取最新数据来编辑
		let rowData = JSON.parse(JSON.stringify(row));
		if (rowData.id)
			ruleForm.value = (await detailCustomer(rowData.id)).data.result;
		else
			ruleForm.value = rowData;
		isShowDialog.value = true;
	};

	//将属性或者函数暴露给父组件
	defineExpose({ openDialog });
</script>




